<template>
  <div class="customize-filter-view">
    <el-dropdown>
      <div class="view-box">
        <img :src="Customize" />
        <div class="view-name" :title="text"> {{text}} </div>
        <i class="iconfont icon-triangle-down"></i>
      </div>

      <el-dropdown-menu slot="dropdown">
        <!-- 视图列表 -->
        <el-dropdown-item class="customize-filter-view-dropdown">
          <div
            v-for="(item, index) in list"
            :key="index"
            class="task-flex task-ai task-pointer"
          >
            <span class="list-dropdown-item" :title="item.name" @click="handleCheckItem(item)">
              {{ item.name }}
            </span>
            <div class="list-dropdown-icon">
              <!-- 查看视图 -->
              <el-tooltip :content="$t('customer.components.customizeFilterView.tips.tip1')" placement="top">
                <i
                  class="iconfont icon-yanjing task-font12"
                  @click="openViewHandler('view', item)"
                ></i>
              </el-tooltip>
              <!-- 编辑视图 -->
              <el-tooltip :content="$t('customer.components.customizeFilterView.tips.tip2')" placement="top">
                <i
                  class="iconfont icon-bianji1 task-ml12 task-font12"
                  @click="openViewHandler('edit', item)"
                  v-if="item.authEdit"
                ></i>
              </el-tooltip>
              <!-- 删除视图 -->
              <el-tooltip :content="$t('customer.components.customizeFilterView.tips.tip3')" placement="top">
                <i
                  class="iconfont icon-shanchu-copy task-ml12 task-font12"
                  @click.stop="handleDeleteView(item)"
                  v-if="item.authEdit"
                ></i>
                {{ item.authEdit }}
              </el-tooltip>
            </div>
          </div>
        </el-dropdown-item>

        <!-- 新建视图 -->
        <el-dropdown-item>
          <div
            class="task-flex task-ai task-cfa task-pointer task-list-wd252"
            @click="openViewHandler('create')"
          >
            <i class="iconfont icon-add task-mr4 task-font12"></i>
            {{ $t('customer.components.customizeFilterView.btns.btn1') }}
          </div>
        </el-dropdown-item>

        <!-- 重置视图 -->
        <el-dropdown-item>
          <div
            class="task-flex task-ai task-cfa task-pointer task-list-wd252"
            @click="reset(true)"
          >
            <i class="iconfont icon-sync task-mr4 task-font12"></i>
            {{ $t('customer.components.customizeFilterView.btns.btn2') }}
          </div>
        </el-dropdown-item>
      </el-dropdown-menu>
    </el-dropdown>

    <!-- 视图抽屉 -->
    <view-panel
      ref="viewPanel"
      :model="model"
      :fields="viewFields"
      @save="handleSaveView"
      @close="closeViewPanel"
    ></view-panel>

    <!-- 遮罩层 -->
    <div v-if="showCover" class="cover"></div>
  </div>
</template>

<script>

import { getOssUrl } from '@src/util/assets'
const Customize = getOssUrl('/customize.png')
import ViewPanel from './ViewPanel.vue';
export default {
  name: 'customize-filter-view',
  props: {
    list: {
      type: Array,
      default: () => [],
    },
    fields: {
      type: Array,
      default: () => [],
    },
    model: {
      type: String,
      default: 'customize-filter', // 'CUSTOMER' 'PRODUCT'
    },
  },
  data() {
    const defaultText = this.$t('customer.components.customizeFilterView.defaultText')
    return {
      Customize,
      defaultText,
      text: defaultText, // 视图列表默认名称or选中名称
      showCover: false, // 视图抽屉打开时的遮罩层
      currentItem: {}
    };
  },
  computed: {
    viewFields() {
      return this.fields.map(f => {
        if (f.formType === 'select' && f.isSystem) {
          // 滤掉全部选项 值为空，影响保存视图的校验
          f.setting.dataSource = f.setting.dataSource.filter(source => source.text !== '全部' && source.value !== '');
        }
        return f;
      })
    }
  },
  methods: {
    // 选中单个视图
    handleCheckItem(item) {
      this.currentItem = item;
      this.text = item.name;
      this.$emit('viewCheck', item);
    },

    /**
     * @description: 打开view panel
     * @param {String} type 类型 create/edit/view
     * @param {Object} item 当前数据 {authEdit: false, id: '', model: '', name: '', searchModel: {}}
     */
    openViewHandler(type, item) {
      let viewData = item || null; // TODO 处理数据
      this.$refs.viewPanel.open(type, viewData);
      this.showCover = true;
    },

    // 删除视图
    handleDeleteView(item) {
      this.$confirm(this.$t('customer.components.customizeFilterView.tips.tip4'), {
        confirmButtonText: this.$t('common.base.makeSure'),
        cancelButtonText: this.$t('common.base.cancel'),
        type: 'warning',
      })
        .then(() => {
          const currSearchModel = JSON.stringify(this.currentItem.searchModel);
          const searchModel = JSON.stringify(item.searchModel);
          const isReset = this.currentItem.name === item.name && currSearchModel === searchModel;
          this.$emit('viewDelete', item, isReset);
        })
        .catch(err => {
          console.error(err)
        });
    },

    /**
     * @description: 保存视图
     * @param {String} type 类型 create/edit/view
     * @param {Object} viewData 与openViewHandler传入数据格式相同
     */
    handleSaveView(type, viewData) {
      this.currentItem = viewData;
      this.text = viewData.name || this.defaultText;
      this.$emit('viewSave', type, viewData);
    },

    // 关闭视图抽屉
    closeViewPanel() {
      this.$refs.viewPanel.visible = false;
      this.showCover = false;
    },

    // 重置
    reset(isEmit = false) {
      if(isEmit) this.$emit('viewReset');
      this.text = this.defaultText;
    }
  },

  components: {
    ViewPanel,
  },
};
</script>
<style lang="scss" scoped>
.customize-filter-view {
  .view-box {
    display: flex;
    justify-content: space-between;
    align-items: center;
    max-width: 200px;
    cursor: pointer;
    img {
      width: 18px;
      height: 15px;
    }
    .view-name {
      white-space: nowrap;
      width: 100%;
      overflow: hidden;
      text-overflow: ellipsis;
      margin: 0 4px;
    }
  }
  .cover {
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 99;
    background-color: rgba(0, 0, 0, 0.6);
  }
}
</style>
<style lang="scss">
.customize-filter-view-dropdown {
  height: 400px;
  overflow: hidden;
  overflow-y: scroll;
  padding: 0 !important;
  width: 200px;
  &:hover {
    color: #333 !important;
    background-color: #fff !important;
  }

  .list-dropdown-icon {
    display: none;
  }

  .list-dropdown-item {
    width: 100px;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    word-break: break-all;
  }

  > div {
    width: 100%;
    padding-left: 15px;
    &:hover {
      background-color: $color-primary-light-1;
      color: #42cece;
    }
    &:hover .list-dropdown-icon {
      display: block;
    }
  }
}
</style>
